import React ,{useState}from 'react'
import { Row, Col,List,Breadcrumb,BackTop,Affix,Spin } from 'antd'
// 头部组件
import {Header} from "../component/Header"
// icon
import {CalendarOutlined,FolderOutlined,FireOutlined} from "@ant-design/icons"
// Author
import Author from "../component/Author"
// Footer
import Footer from "../component/Footer"
// Link
import Link from "next/link"
// marked
import marked from "marked"
// Url
import Url from "./api/url"
// axios
import axios from "./api/axios"
// css 
import "../static/css/datouwang.css"
// img
// import BackImg from "../static/img/small60d4fea7ba041eaa32730221622c1a471599660316.jpg"
// 中间内容样式
import "../styles/pages/index.css"
import Advirt from "../component/Advert" 

const MyList = (data) =>{
  const [mylist,setMyList] = useState(data.data)
  // markdown
  const [isloading,setIsLoading] = useState(false)
  marked.setOptions({
    gfm:true,
    pedantic:false,
    sanitize:false,
    tables:true,
    breaks:false,
    smartLists:true,
    highlight:(code)=>{
      return hljs.highlightAuto(code).value
    }
  })
  const Loding =()=>{
    setIsLoading(true)
  }
  return(
  <>
  <title>笔迹</title>
  <Spin spinning={isloading} size="large">
  <Affix offsetTop={0}>
    <Header> 
    </Header>
    </Affix>
    {/* 左侧 */}
  
    <Row className="comm-main" type="flex" justify="center">
      <Col className="comm-left" xs={22} sm={22} md={16} lg={18} xl={14}>
        <div className="bread-div">
          <Breadcrumb>
            <Breadcrumb.Item>
                <a href="/">首页</a>
            </Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <List header={<div className="header_title"> 最新日志</div>} 
        itemLayout="vertical"
        dataSource={mylist}
        renderItem={Item=>(
          <List.Item>
            <div className="list-title" onClick={Loding}>
              <Link href={{pathname:"/details",query:{id:Item.id}}}>
                <a>  {Item.title}</a>
              </Link>   
              
            </div>
            <div className="list-icon">
            
              <CalendarOutlined /><span className="info">{Item.create_time}</span>
            
            
            <FolderOutlined /><span className="info">{Item.type_name}</span>
           
               <FireOutlined /><span className="info">{Item.view_count}</span>
      
            </div>
            <div className="list-context"   dangerouslySetInnerHTML={{__html:marked(Item.introduce)}}></div>
          </List.Item>
        )}
        />
      </Col>
      <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
   
        <Author />
        
        {/* <Advirt /> */}
      </Col>
     
    </Row>
    <Row>
      <Col xs={24} sm={24} md={24} lg={24} xl={24}>
            <Footer />
        </Col>
    </Row>
    <BackTop />
    </Spin>      
 </>
)
  }
  MyList.getInitialProps =async ()=>{
    let res = await axios.get(Url.article)
    return res.data
  }
export default MyList